<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model</title>
    <script src="./node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg"><br> <!--双向数据绑定-->
        <span v-text="msg"></span>

        <form action="#">
            <input v-model="hobby" type="checkbox" name="hobby" value="cf">吃饭 <br>
            <input v-model="hobby" type="checkbox" name="hobby" value="sj">睡觉 <br>
            <input v-model="hobby" type="checkbox" name="hobby" value="ddd">打豆豆 <br>
            <span>{{hobby}}</span><br>
            <!-- 复选框使用v-model 搜集数据的时候，如果不配置value，则默认搜集的被选择框的checked ，最终是个Boolean值
					所以搜集复选框的时候，要把data里面的hobby设置成一个数组
			-->

            <input v-model="sex" type="radio" name="sex" value="男"> 男
            <input v-model="sex" type="radio" name="sex" value="女"> 女 <br>
            <span>{{sex}}</span>

            <h3>v-model修饰符（具体看笔记）</h3>
            <input type="text" v-model.number="x">
            <span>{{x}}</span>
        </form>
    </div>
</body>

<script>
    const {createApp} = Vue;
    const app = createApp({
        data() {
            return {
                msg: "Hello",
                hobby: ["cf"],
                sex: "男",
                x: ""
            }
        }
    }).mount("#app");
</script>
</html>